import React from 'react';
import {Table, Input, Select, Form, Box, Button, Card, DatePicker, Message, Radio, Collapse,Upload, Switch, Dialog, Grid } from '@alifd/next';
import styles from './index.module.scss';

import {detailV, update} from '@/api/RotationImageAPI'
import {upLoadImage, upLoadApk} from '@/api/CommonAPI'
import {getOptionValue} from '@/utils/tool'
import JsonUtils from '@/utils/JsonUtils'
const {Row, Col} = Grid;
const FormItem = Form.Item;
const Panel = Collapse.Panel;
const formItemLayout = {
  colSpan: 12,
};

const formItemLayout_two = {
    colSpan: 6,
};
const formItemLayout_three = {
    colSpan: 4,
};

const DEFAULT_DATA = {
    id : '',
    serialNum :'',
    type :'0',
    pageType :'',
    pagePosition :'1',
    weight :'',
    state : '0',
    images :[],
    publishTime :'',
    remark : '',
    createTime : '',
    createId : '',
    createName : '',
    updateTime : '',
    updateId : '',
    updateName : '',
  };

class DetailRotationImage extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            postData: DEFAULT_DATA,
            visible: false,
            statesDataOption: [],
            typeDataOption:[],
            pageTypeDataOption:[],
            pagePositionDataOption:[],

        };
    }

    
    // 初始化方法
    componentDidMount(){
        this.props.onRef(this)
    };

    // 1 打开弹框
    onOpen = (key, statesData, typeData, pageTypeData, pagePositionData) => {
        this.resetForm(); 
        detailV(key).then((data)=>{
            if(data){
                // 遍历赋值
                for(var k in data){
                    DEFAULT_DATA[k] = data[k]
                }
                // 处理图片预览
                data.images.map((item)=>{
                    item.state = 'done'
                    item.uid = item.id
                })
                this.setState({
                    statesDataOption: statesData,
                    typeDataOption: typeData,
                    pageTypeDataOption: pageTypeData,
                    pagePositionDataOption: pagePositionData,
                    postData: DEFAULT_DATA,
                    visible: true,
                })
            }else{
                Message.error("加载数据失败...")
            }
        });
    };
    // 2 关闭弹框
    onClose = () => {
        this.setState({
            visible: false
        })
    };

    /**
     * 重置表单
     */
    resetForm = ()=>{
        DEFAULT_DATA.id = '',
        DEFAULT_DATA.serialNum ='',
        DEFAULT_DATA.type ='0',
        DEFAULT_DATA.pageType ='',
        DEFAULT_DATA.pagePosition ='1',
        DEFAULT_DATA.weight ='',
        DEFAULT_DATA.state = '0',
        DEFAULT_DATA.images =[],
        DEFAULT_DATA.publishTime ='',
        DEFAULT_DATA.remark = '',
        DEFAULT_DATA.createTime = '',
        DEFAULT_DATA.createId = '',
        DEFAULT_DATA.createName = '',
        DEFAULT_DATA.updateTime = '',
        DEFAULT_DATA.updateId = '',
        DEFAULT_DATA.updateName = '',
        this.setState({
            DEFAULT_DATA,
        })
    }

    onPreview(info){
        console.log('onPreview:::', info);
    }

    render(){
        return (
            <div > 
                <Dialog title="轮播图信息详情" visible={this.state.visible} footer ={false}  onClose={this.onClose} style={{width: '40%'}} >
                    <Card free className={styles.TwoColumnForm}>
                    <Card.Content>
                        <Form responsive fullWidth value={this.state.postData} labelAlign="top">
                            <FormItem {...formItemLayout_two} label="序列号" required requiredMessage="必填">
                                <Input name="serialNum" placeholder="自动生成" disabled />
                            </FormItem>
                            <FormItem {...formItemLayout_two} label="名称" required requiredMessage="必填">
                                <Input name="pictureName" placeholder="请填写名称" disabled/>
                            </FormItem>
                            <FormItem {...formItemLayout_two} label="轮播类型"  required requiredMessage="必填">
                                <Select name='type' placeholder="选择轮播类型" dataSource= {this.state.typeDataOption || []}  disabled/>
                            </FormItem>
                            <FormItem {...formItemLayout_two} label="权重" required requiredMessage="必填">
                                <Input name="weight" placeholder="请输入权重" disabled />
                            </FormItem>
                            <FormItem {...formItemLayout_two} label="页面类型"  required requiredMessage="必填">
                                <Select name='pageType' placeholder="选择页面类型" dataSource= {this.state.pageTypeDataOption || []} disabled/>
                            </FormItem>
                            <FormItem {...formItemLayout_two} label="页面位置"  required requiredMessage="必填">
                                <Select name='pagePosition' placeholder="选择页面位置" dataSource= {this.state.pagePositionDataOption || []}  disabled/>
                            </FormItem>

                            <FormItem {...formItemLayout_two} label="轮播图" required requiredMessage="必填">
                                <Upload.Card name="images" listType="card"
                                    accept="image/png, image/jpg, image/jpeg, image/gif, image/bmp"
                                    limit={1}
                                    disabled
                                />
                            </FormItem>
                            <FormItem {...formItemLayout_two} label="备注">
                                <Input.TextArea placeholder="请输入备注" name="remark" disabled/>
                            </FormItem>
                            <FormItem {...formItemLayout_two} label="状态" required requiredMessage="必填">
                                <Select name='state' placeholder="选择页面类型" dataSource= {this.state.statesDataOption || []} disabled/>
                            </FormItem>
                            <FormItem {...formItemLayout_two} label="发布时间">
                                <Input name="publishTime" disabled/>
                            </FormItem>
                            <FormItem {...formItemLayout_two} label="创建人">
                                <Input name="createName" disabled/>
                            </FormItem>
                            <FormItem {...formItemLayout_two} label="创建时间">
                                <Input name="createTime" disabled/>
                            </FormItem>
                            <FormItem {...formItemLayout_two} label="最后一次修改人">
                                <Input name="updateName" disabled/>
                            </FormItem>
                            <FormItem {...formItemLayout_two} label="最后一次时间">
                                <Input name="updateTime" disabled/>
                            </FormItem>
                        </Form>
                    </Card.Content>
                    </Card>
                </Dialog>
            </div>
        );
    }
}
export default DetailRotationImage;